<style lang="scss">
@import '../static/common/variable.scss';
.hot {
    width: 100%;
    padding: $pad;
    border-top: 2px solid #f0f0f0;
    margin-bottom: 10px;
    h3 {
        font-size: 18px;
    }

    ul {
        a {
            text-decoration: none;
            color: #000;
            font-size: 16px;
            display: block;
            width: 100%;
        }
        .item {
            width: 100%;
            display: flex;
            border-bottom: 1px dashed #ccc;
            align-items: center;
            margin-top: 10px;
            padding: 10px 0;
            .img-box {
                width: 100px;
                overflow-x: hidden;
                background-color: #f0f0f0;
                flex-shrink: 0;
                margin-right: 10px;
                img {
                    width: 100%;
                    // vertical-align: middle;
                }
            }
            .text-box {
                width: calc(100% - 100px);
                .tit {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 17px;
                }
                .con {
                    margin-top: 10px;
                    font-size: 16px;
                    span {
                        color: #666;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

</style>

<template>
    <div class="hot">
        <h3>热门文章</h3>
        <ul>
            <li v-for="item in articles">
                <RouterLink :to="{path: '/detail', query:{id: item.id,article_id: item.article_id}}">
                    <div class="item">
                        <div class="img-box"> <img :src="item.article_src" alt=""> </div>
                        <div class="text-box">
                            <div class="tit">{{ item.article_title }}</div>
                            <div class="con">{{ item.article_address }} <span>{{ moment(item.article_create_time).format('YYYY-MM-DD hh:mm:ss') }}</span></div>
                        </div>
                    </div>

                </RouterLink>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { hotArticleItemFn } from '../api/index'
import moment from 'moment';

interface ArticleItem {
    id: string;
    article_title: string;
    article_src: string;
    article_id: string;
    article_author: string;
    article_address: string;
    article_content: string;
    article_hot: number;
    article_status: number;
    classify_text: string;
    article_read?: string | null | any ;
    article_create_time: string
}

let articles = ref<ArticleItem[]>([]);

const hotArticleItem = async (page:number, pageSize: number)=> {
    await hotArticleItemFn({page,pageSize})
    .then(
        content=> {
            let {code, result} = content;
            // console.log(result)
            if(code == 200) {
                result && result.reverse();
                articles.value = result;
                // console.log(1.0,articles.value)
            }
        }
    )

}
hotArticleItem(1,10);


</script>